// nécessite d'avoir une variable globale 'categories' de la forme [{id:int, libelle:string, articles:[id:int, ref:string, libelle:string, tarif:int]}] pour utiliser le mode article
var count = 0;
var countBloc = 0;


// permet d'ajouter une question générale, qui n'est donc pas attaché à un bloc
// paramètres :
// - id_bloc_question_generale : id du bloc où doivent être ajouté les questions
// - question : peut être undefined. Correspond aux informations e la question à ajouté.
function ajouterQuestionGenerale(type_question, id_bloc_question_generale, id_bloc_visio, categories) {
	var out = document.getElementById(id_bloc_question_generale);
	var out_visio = document.getElementById(id_bloc_visio);
	
	// ajout de l'input côté admin
	out.appendChild(nouvelElement('label', {textnode:'Nom de la question'}));
	var input_nom_question = nouvelElement('input', {type:'text', value:'Nom de la question'});
	out.appendChild(input_nom_question);
	
	// ajout de l'input côté visio
	var visio_nom_question = nouvelElement('span', {textnode:'Nom de la question'});
	out_visio.appendChild(visio_nom_question);
	
	// ajout de la mise à jour en temps réel
	input_nom_question.onkeyup = function () {
		visio_nom_question.textnode.nodeValue = input_nom_question.value;
	}
	
	switch(type_question) {
		case 'ARTICLE':
			var liste_categorie = nouvelElement('select');
			for (var k in categories) {
				var opt = nouvelElement('option', {value:k, text:categories[k].description_categorie});
				liste_categorie.appendChild(opt);
			}
			out.appendChild(liste_categorie);
			break;
		case 'LISTE': break;
		case 'TEXTE':
			break;
		case 'ENTIER': break;
		case 'OUINON': break;
	}
}

// permet de changer la classe de deux élément lors du survole de l'un des deux.
// paramètres :
// - reel et visio : les deux éléments qui change de classe
// - classeReel et classeVisio : les nouvelles classes à attribuer. Si classeVisio est undefined, reel et visio prennent tout deux la classe classeReel
function changerStyleReelVisio(reel, visio, classeReel, classeVisio) {
	// recherche du style pour la classe visio, si il n'existe pas, on fait une copie du style de la classe réel
	if(classeVisio == undefined) classeVisio = classeReel;
	
	// on sauvegarde les anciens style
	var oldClasseReel = reel.className ? reel.className : '';
	var oldClasseVisio = visio.className ? visio.className : '';
	
	// construction des structures pour retenir les anciennes classes
	// reel
	if(reel.length) {
		oldClasseReel = new Array();
		// ajout des classes à la liste
		for (k in reel) {
			oldClasseReel[k] = reel[k].className;
		}
	}
	else oldClasseReel = reel.className;
	// visio
	if(visio.length) {
		oldClasseVisio = new Array();
		// ajout des classes à la liste
		for (k in visio) {
			oldClasseVisio[k] = visio[k].className;
		}
	}
	else oldClasseVisio = visio.className;
	
	// création des fonctions pour appliquer le nouveau et l'ancien style
	function appliquerNouveauStyle() {
		if(reel.length) {
			for (r in reel) {
				reel[r].className = classeReel + ' ' + oldClasseReel[r];
			}
		}
		else reel.className = classeReel + ' ' + oldClasseReel;
		if(visio.length) {
			for (v in visio) {
				visio[v].className = classeVisio + ' ' + oldClasseVisio[v];
			}
		}
		else visio.className = classeVisio + ' ' + oldClasseVisio;
	}
	
	function appliquerAncienStyle() {
		if(reel.length) {
			for (r in reel) {
				reel[r].className = oldClasseReel[r];
			}
		}
		else reel.className = oldClasseReel;
		if(visio.length) {
			for (v in visio) {
				visio[v].className = oldClasseVisio[v];
			}
		}
		else visio.className = oldClasseVisio;
	}
	
	// attachement des fonctions créer aux événements des objets
	if(reel.length) {
		for (r in reel) {
			reel[r].onmouseover = function(){appliquerNouveauStyle()};
			reel[r].onmouseout = function(){appliquerAncienStyle()};
		}
	}
	else {
		reel.onmouseover = function(){appliquerNouveauStyle()};
		reel.onmouseout = function(){appliquerAncienStyle()};
	}
	
	if(visio.length) {
		for (v in visio) {
			visio[v].onmouseover = function(){appliquerNouveauStyle()};
			visio[v].onmouseout = function(){appliquerAncienStyle()};
		}
	}
	else {
		visio.onmouseover = function(){appliquerNouveauStyle()};
		visio.onmouseout = function(){appliquerAncienStyle()};
	}
}

// permet d'ajouter un bloc de type VoxBloc au système de formulaire avec un aperçu en temps réel.
// - id_el : l'id de l'élément HTML où ajouter le formulaire d'edition
// - id_visio : l'id de l'élément HTML où ajouter le formulaire d'aperçu
// - cBloc : le numéro associé à ce bloc. Deux blocs ne doivent avoir le même numéro.
// - infoBloc : des informations sur le bloc à créer. Peut être undefined ou un teableau associatif de la forme :
// 	{
//		  info_VoxBloc:
//		  {
//				id_vox_bloc,
//				libelle_vox_bloc
//		  },
//		  BlocsQuestions:
//		 [
//			  {id, description, questions:[tableau de question]}
//		 ]
//	  }
function ajouterBloc(id_el, id_visio, cBloc, VoxBloc) {
	var nbEnsemble = 0;
	var nomDuBloc = 'Nom du bloc';
	
	if(VoxBloc != undefined) nomDuBloc = VoxBloc.info_VoxBloc.libelle_vox_bloc;
	
	/* CREATION DE L'APERCU */
	// récupération de l'élément où ajouter le visio
	var visio = document.getElementById(id_visio);
	
	// creation du div visio pour ce bloc
	var blocVisio = nouvelElement('div');
	// création du bloc pour le titre
	var titreVisio = nouvelElement('div', {className:'titre_clic_test'});
	var textTitreVisio = document.createTextNode(nomDuBloc);
	titreVisio.appendChild(textTitreVisio);
	// création du bloc pour les éléments du formulaires
	var blocInputVisio = nouvelElement('div', {className:'togglebox_test'});
	
	// ajout des éléments au formulaire de visionnage
	blocVisio.appendChilds([titreVisio, blocInputVisio]);
	visio.appendChild(blocVisio);
	
	/* CREATION DU FORMULAIRE DE MODIFICATION */
	// récupération de l'élément
	var el = document.getElementById(id_el);
	
	// création du bloc
	var bloc = nouvelElement('div', {className:'bloc'});
	
	// création du bouton de suppression du bloc
	var boutonSupprimerBloc = nouvelElement('img', {src:'../../img/delete.png', className:'bouton_en_haut'});
	boutonSupprimerBloc.onclick = function() {
		// suppression côter formulaire
		el.removeChild(bloc);
		// suppression côter visio
		visio.removeChild(blocVisio);
		// si ce bloc existe déjà dans la bdd, on ajoute un input de type hidden afin de retenir qu'il faut supprimer ce bloc
		if(VoxBloc != undefined) {
			var hiddenDeleteBloc = nouvelElement('input', {type:'hidden', name:'removeBloc[]', value:VoxBloc.info_VoxBloc.id_vox_bloc});
			el.appendChild(hiddenDeleteBloc);
		}
	}
	
	// création du div pour l'ensemble des ensembles
	var divEnsemble = nouvelElement('div');
	// création du div pour l'input et son label
	var divNomBloc = nouvelElement('div');
	// création du label pour le nom du bloc
	var labelNomBloc = nouvelElement('label', {textnode:'Nom du bloc : ', className:'classique'});
	// création de la saisie du nom du bloc
	var inputNomBloc = nouvelElement('input', {type:'text', value:nomDuBloc, name:'bloc['+cBloc+'][nom]'});
	inputNomBloc.onkeyup = function() {
		textTitreVisio.nodeValue = inputNomBloc.value;
	}
	
	// si on a les info du bloc, on ajoute un input de type 'hidden' avec l'id du bloc afin de retenir que ce bloc existe déjà dans la bdd et agir en conséquence
	if(VoxBloc != undefined) {
		var inputId = nouvelElement('input', {type:'hidden', value:VoxBloc.info_VoxBloc.id_vox_bloc, name:'bloc['+cBloc+'][id]'});
		bloc.appendChild(inputId);
	}
	
	// ajout du label et de l'input au div
	divNomBloc.appendChilds([labelNomBloc, inputNomBloc]);
	
	// création du bouton d'ajout d'ensemble
	var boutonAjouterEnsemble = nouvelElement('input', {type:'button', value:'Ajouter un ensemble de question'});
	boutonAjouterEnsemble.onclick = function() {
		ajouterEnsembleQuestion(el, divEnsemble, blocInputVisio, cBloc, nbEnsemble++);
	}
	
	// ajout des éléments créer dans le bloc
	bloc.appendChilds([boutonSupprimerBloc, divNomBloc, divEnsemble, boutonAjouterEnsemble]);
	
	// ajout du bloc dans l'élément récupéré précédemment
	el.appendChild(bloc);
	
	// ajout du flashy
	changerStyleReelVisio([labelNomBloc, inputNomBloc], titreVisio, 'flashyflashy');
	
	// ajout des ensembleQuestion si ils existent
	if (VoxBloc != undefined) {
		for (key in VoxBloc.BlocsQuestions) {
			ajouterEnsembleQuestion(el, divEnsemble, blocInputVisio, cBloc, nbEnsemble++, VoxBloc.BlocsQuestions[key]);
		}
	}
}

// permet d'ajouter un bloc de question à un VoxBloc
// - el : l'élément HTML correspondant au formulaire
// - bloc : l'élément HTML (le VoxBloc) où ajouter l'edition du formulaire
// - blocVisio : l'élemtn HTML où ajouter l'aperçu du formulaire
// - cBLoc : le numéro du bloc correspondant
// - nbEnsemble : le numéro de l'ensemble. Deux ensembles d'un même bloc ne doivent pas avir un mêmé numéro.
// - BlocQuestion : un tableau associatif contenant les infos de l'ensemble. Peut être undefined ou un tableau associatif de la forme :
// {
//	 info_BlocQuestion:
//	 {
//		 id_bloc, description_bloc
//	 },
//	 Questions:
//	 [
//		 {info sur la question}
//	 ]
function ajouterEnsembleQuestion(el, bloc, blocVisio, cBloc, nbEnsemble, BlocQuestion) {
	var nbQuestion = 0;
	var nbInput = 0;
	var nomDeLEnsemble = "Titre de l'ensemble";
	
	if(BlocQuestion != undefined) nomDeLEnsemble = BlocQuestion.info_BlocQuestion.description_bloc;

	/* CREATION DE L'APERCU */
	// création de l'ensemble côté visio
	var ensembleVisio = nouvelElement('div');
	// création du titre de l'ensemble en visio
	var titreEnsembleVisio = nouvelElement('div', {className:'titre_categorie'});
	var texteTitreEnsembleVisio = document.createTextNode(nomDeLEnsemble);
	titreEnsembleVisio.appendChild(texteTitreEnsembleVisio);
	
	// ajout des éléments à l'ensemble visio
	ensembleVisio.appendChild(titreEnsembleVisio);
	blocVisio.appendChild(ensembleVisio);
	
	/* CREATION DU FORMULAIRE DE MODIFICATION */
	// création du div pour contenir les questions
	var divQuestions = nouvelElement('div');
	// création de l'ensemble de questions
	var ensemble = nouvelElement('div', {className:'add_element'});
	
	// création du div pour l'input et son label
	var divTitreEnsemble = nouvelElement('div');
	// création du label pour le titre de l'ensemble
	var labelTitreEnsemble = nouvelElement('label', {textnode:"Titre de l'ensemble : ", className:'classique'});
	// création de l'input pour le titre de l'ensemble
	var inputTitreEnsemble = nouvelElement('input', {type:'text', value:nomDeLEnsemble, name:'bloc['+cBloc+'][ensemble]['+nbEnsemble+'][nom]'});
	inputTitreEnsemble.onkeyup = function () {
		texteTitreEnsembleVisio.nodeValue = inputTitreEnsemble.value;
	}
	// ajout de l'input et son label dans le div
	divTitreEnsemble.appendChilds([labelTitreEnsemble, inputTitreEnsemble]);
	
	// si on a les info de l'ensemble, on ajoute un input de type 'hidden' avec l'id de l'ensemble afin de retenir que cet ensemble existe déjà dans la bdd et agir en conséquence
	if(BlocQuestion != undefined) {
		var inputId = nouvelElement('input', {type:'hidden', value:BlocQuestion.info_BlocQuestion.id_bloc, name:'bloc['+cBloc+'][ensemble]['+nbEnsemble+'][id]'});
		ensemble.appendChild(inputId);
	}
	
	// création de l'entête
	var titre = nouvelElement('span', {textnode:'Ajouter un élément : '});

	// création de du select pour choisir l'élément à ajouter
	var select = nouvelElement('select');
	select.onchange = function() {
		ajouterQuestion(el, this, this.value, divQuestions, ensembleVisio, cBloc, nbEnsemble, nbInput++, undefined, nbQuestion++);
	}
	
	// création du bouton de suppression
	var boutonSuppression = nouvelElement('img', {src:'../../img/delete.png', className:'bouton_en_haut'});
	boutonSuppression.onclick = function(){
		bloc.removeChild(ensemble);
		blocVisio.removeChild(ensembleVisio);
		
		// si cet ensemble de question existe déjà dans la bdd, on ajoute un input de type hidden afin de retenir qu'il faut supprimer cet ensemble
		if(BlocQuestion != undefined) {
			var hiddenDeleteEnsemble = nouvelElement('input', {type:'hidden', name:'removeEnsemble[]', value:BlocQuestion.info_BlocQuestion.id_bloc});
			el.appendChild(hiddenDeleteEnsemble);
		}
	};
	
	// création des options du select
	var optTitre = nouvelElement('option', {value:'false', text:"Type de l'élément"});
	var optTexte = nouvelElement('option', {value:'TEXTE', text:'Texte'});
	var optNombre = nouvelElement('option', {value:'ENTIER', text:'Nombre'});
	var optListe = nouvelElement('option', {value:'LISTE', text:'Liste'});
	var optOuinon = nouvelElement('option', {value:'OUINON', text:'Oui/Non'});
	var optArticle = nouvelElement('option', {value:'ARTICLE', text:'Article'});
	
	// ajout des options au select
	select.appendChilds([optTitre, optTexte, optNombre, optListe, optOuinon, optArticle]);
	
	// ajout de l'ensemble au bloc
	ensemble.appendChilds([boutonSuppression, divTitreEnsemble, divQuestions, titre, select]);
	bloc.appendChild(ensemble);
	
	// ajout des couleurs lors du survol
	changerStyleReelVisio(new Array(labelTitreEnsemble, inputTitreEnsemble), titreEnsembleVisio, 'flashyflashy');
	
	// ajout des ensembleQuestion si ils existent
	if (BlocQuestion != undefined) {
		for (key in BlocQuestion.Questions) {
			ajouterQuestion(el, undefined, BlocQuestion.Questions[key].info.type_reponse, divQuestions, ensembleVisio, cBloc, nbEnsemble, nbInput++, BlocQuestion.Questions[key], nbQuestion++);
		}
	}
}



// permet d'ajouter un question à un ensemble de question d'un VoxBloc
// l'élément select désignant le type de l'élément retrouve son focux sur la première option
// - el_form : l'élément HTML correspondant au formulaire
// - select : élément HTML de type select qui détient le type de question à ajouter. Peut être undefined
// - type : le type de l'élément à ajouter
// - out : l'élément HTML où ajouter le formulaire d'édition
// - vision : l'élément HTML où ajouter le formulaire d'aperçu
// - cBloc : le numéro de bloc
// - nbEnsemble : le numéro de l'ensemble
// - nbInput : le numéro de l'input. Deux input d'un même ensemble ne doivent pas avoir un même numéro.
// - question : des informations sur la question. Peut être undefined ou un tableau associatif de la forme :
// {
//	 info:
//	 {
//		 id_question,
//		 type_reponse,
//		 libelle_question,
//		 question_active_par_defaut,
//		 id_categorie
//	 },
//	 Reponses:
//	 [
//		 {blablabla}, id_categorie
//	 ]
// }
function ajouterQuestion(el_form, select, type, out, visio, cBloc, nbEnsemble, nbInput, question, nbQuestion) {
	// mise à jours du compteur pour cette instance d'appel
	var thisCount = count;
	// création des bloc (el pour le formulaire, divShow pour le visionnage)
	var el = nouvelElement('div', {className:'form_element'});
	el.id = 'bloc_'+cBloc+'ensemble_'+nbEnsemble+'question_'+nbQuestion;
	var divShow = nouvelElement('div');
	divShow.id = 'visioBloc_'+cBloc+'ensemble_'+nbEnsemble+'question_'+nbQuestion;
	
	// détermination du nom, soit par défaut, soit celui passé en paramètres
	var nomDeLaQuestion = "Nom de l'élément";
	if(question != undefined) nomDeLaQuestion = question.info.libelle_question;
	
	// bouton pour monter la question
	var boutonMonter = nouvelElement('input', {type:'button', value:'^', className:'bouton_en_haut'});
	boutonMonter.onclick = function(){
		monterQuestion(el, nbQuestion, nbEnsemble, cBloc);
	};
	
	// bouton pout descendre la question
	var boutonDescendre = nouvelElement('input', {type:'button', value:'v', className:'bouton_en_haut'});
	boutonDescendre.onclick = function(){
		descendreQuestion(el, nbQuestion, nbEnsemble, cBloc);
	};
	
	// boutton de suppression
	var boutonSuppression = nouvelElement('img', {src:'../../img/delete.png', className:'bouton_en_haut'});
	boutonSuppression.onclick = function(){
		el.parentNode.removeChild(el);
		divShow.parentNode.removeChild(divShow);
		
		// si cette question existe déjà dans la bdd, on ajoute un input de type hidden afin de retenir qu'il faut supprimer cette question
		if(question != undefined) {
			var hiddenDeleteQuestion = nouvelElement('input', {type:'hidden', name:'removeQuestion[]', value:question.info.id_question});
			el_form.appendChild(hiddenDeleteQuestion);
		}
	};
	el.appendChild(boutonSuppression);
	el.appendChild(boutonDescendre);
	el.appendChild(boutonMonter);
	
	// create hidden input which specify the type of the element
	var hidden = nouvelElement('input', {type:'hidden', name:'bloc['+cBloc+'][ensemble]['+nbEnsemble+'][input]['+nbInput+'][type]', value:type});
	
	// creation de l'input côté formulaire et du label côté visio
	// formulaire
	var nom_lab = {'TEXTE' : 'Texte', 'ENTIER' : 'Nombre', 'OUINON' : 'Oui / Non', 'LISTE' : 'Liste', 'ARTICLE' : 'Article'};
	var lab_type = nouvelElement('span', {textnode:nom_lab[type] + ' '});
	var name_label = nouvelElement('input', {type:'text', name:'bloc['+cBloc+'][ensemble]['+nbEnsemble+'][input]['+nbInput+'][val]', value:nomDeLaQuestion});
	// visio
	var divLabel = nouvelElement('div');
	var labelShow = nouvelElement('label', {textnode:nomDeLaQuestion});
	divLabel.appendChild(labelShow);
	// ajout de l'événement pour remettre à jour le label lors de la modification de l'input
	name_label.onkeyup = function(){labelShow.innerHTML = name_label.value}
	
	// ajout des éléménets
	el.appendChild(lab_type);
	el.appendChild(name_label);
	divShow.appendChild(divLabel);
	
	// ajout des couleurs lors du survol
	changerStyleReelVisio([lab_type, name_label], labelShow, 'flashyflashy');
	
	// création de l'objet en fonction de son type
	if(type == 'TEXTE' || type == 'ENTIER') {
		// add show object
		var divInput = nouvelElement('div');
		var inputShow = nouvelElement('input', {type:type == 'TEXTE' ? 'text' : 'number'});
		divInput.appendChild(inputShow);
		
		// add every elements
		divShow.appendChild(divInput);
	}
	else if(type == "OUINON") {
		// creation des radios oui et non
		var radioOui = nouvelElement('input', {type:'radio', name:'radio'+thisCount});
		var radioNon = nouvelElement('input', {type:'radio', name:'radio'+thisCount});
		
		// add every elements
		divShow.appendChilds([document.createTextNode('oui'), radioOui, document.createTextNode('non'), radioNon]);
	}
	else if(type == 'LISTE') {
		// création des éléments côté visio
		var listeElementVisio = nouvelElement('select');
		
		// creation du système d'ajout côté input
		var listeElementAjoutee = nouvelElement('div');
		var labelNomNouvelElement = nouvelElement('label', {textnode:"Elément à ajouter : ", className:'classique'});
		var inputNomNouvelElement = nouvelElement('input', {type:'text'});
		var boutonAjouterElement = nouvelElement('input', {type:'button', value:'Ajouter'});
		
		boutonAjouterElement.onclick = function() {
			if(inputNomNouvelElement.value != '') {
				var divElement = nouvelElement('div', {textnode:inputNomNouvelElement.value, childs:[nouvelElement('input', {type:'hidden', name:'bloc['+cBloc+'][ensemble]['+nbEnsemble+'][input]['+nbInput+'][liste][][val]', value:inputNomNouvelElement.value})]});
				var option = nouvelElement('option', {value:inputNomNouvelElement.value, text:inputNomNouvelElement.value})
				var boutonSupprimerElement = nouvelElement('img', {src:'../../img/delete.png', style:'cursor:pointer;'});
				boutonSupprimerElement.onclick = function() {
					listeElementAjoutee.removeChild(divElement);
					listeElementVisio.removeChild(option);
				}
				divElement.appendChilds([boutonSupprimerElement, nouvelElement('br')]);
				listeElementAjoutee.appendChild(divElement);
				listeElementVisio.appendChild(option);
				inputNomNouvelElement.value = '';
			}
		}
		
		// ajout d'éléments réponses si spécifiés
		if(question != undefined) {
			var nbListe = 0;
			for (key in question.Reponses) {
				// on crée une fonction que l'on appel ensuite, afin de bien créer un nouveau context de closure, sinon le context se retrouve changé en plein milieu
				function ajouterUnElement() {
					var elem = question.Reponses[key];
					var divElement = nouvelElement('div', {textnode:elem.libelle_reponse_combo, childs:[nouvelElement('input', {type:'hidden', name:'bloc['+cBloc+'][ensemble]['+nbEnsemble+'][input]['+nbInput+'][liste]['+nbListe+'][val]', value:elem.libelle_reponse_combo})]});
					var option = nouvelElement('option', {value:elem.libelle_reponse_combo, text:elem.libelle_reponse_combo})
					var boutonSupprimerElement = nouvelElement('img', {src:'../../img/delete.png', style:'cursor:pointer;'});
					boutonSupprimerElement.onclick = function() {
						var hiddenDeleteQuestion = nouvelElement('input', {type:'hidden', name:'removeReponse[]', value:elem.id_reponse});
						el_form.appendChild(hiddenDeleteQuestion);
						listeElementAjoutee.removeChild(divElement);
						listeElementVisio.removeChild(option);
					}
					divElement.appendChilds([boutonSupprimerElement, nouvelElement('br'), nouvelElement('input', {type:'hidden', name:'bloc['+cBloc+'][ensemble]['+nbEnsemble+'][input]['+nbInput+'][liste]['+nbListe+'][id]'})]);
					listeElementAjoutee.appendChild(divElement);
					listeElementVisio.appendChild(option);
					nbListe++;
				}
				ajouterUnElement();
			}
		}
		
		el.appendChilds([listeElementAjoutee, labelNomNouvelElement, inputNomNouvelElement, boutonAjouterElement]);
		divShow.appendChild(listeElementVisio);
	}
	else if(type == 'ARTICLE') {
		// création du système de choix côté formulaire
		var labelListeCategories = nouvelElement('label', {textnode:"Choisissez la categorie d'articles : "});
		var listeCategories = nouvelElement('select', {name:'bloc['+cBloc+'][ensemble]['+nbEnsemble+'][input]['+nbInput+'][categorie]'});
		for (var key in categories) {
			listeCategories.appendChild(nouvelElement('option', {value:categories[key].id_categorie, text:categories[key].description_categorie}));
		}
		// création de l'affichage côté visio
		var listeArticles = nouvelElement('select');
		// si l'élément existe déjà (info != undefined), alors on positionne le curseur du select sur le bon élément
		if(question != undefined) {
			// on recherche l'element qui a cet id
			for (var i = 0; i < listeCategories.options.length; i++) {
				if(listeCategories.options[i].value == question.info.id_categorie) {
					listeCategories.selectedIndex = i;
				}
			}
		}
		// attachement des évènements
		listeCategories.onchange = function() {
			// récupération de l'index
			var i = listeCategories.options[listeCategories.selectedIndex].value;
			// suppression des anciens articles dans le select du visio
			listeArticles.clearChilds();
			// création du nouveau contenu pour le select du visio
			for (var key in categories[i].articles) {
				listeArticles.appendChild(nouvelElement('option', {value:categories[i].articles[key].ref_article, text:categories[i].articles[key].ref_article}));
			}
		}
		// ajout des éléments
		el.appendChilds([nouvelElement('br'), labelListeCategories, listeCategories]);
		divShow.appendChild(listeArticles);
		// appel initial pour remplir la liste des articles
		listeCategories.onchange();
	}
	
	// on ajoute la case 'activée par défaut'
	var active = nouvelElement('input', {type:'checkbox', name:'bloc['+cBloc+'][ensemble]['+nbEnsemble+'][input]['+nbInput+'][question_active_par_defaut]'});
	active.checked = question != undefined ? question.info.question_active_par_defaut : true;
	active.onchange = function() {
		if(active.checked) {
			divShow.style.opacity = '1';
		}
		else {
			divShow.style.opacity = '0.5';
		}
	}
	if(!active.checked) divShow.style.opacity = '0.5';
	el.appendChilds([nouvelElement('br'), active, nouvelElement('span', {textnode:'Activée par défaut'})]);
	
	// si on a les info de la question, on ajoute un input de type 'hidden' avec l'id de la question afin de retenir que cette question existe déjà dans la bdd et agir en conséquence
	if(question != undefined) {
		el.appendChild(nouvelElement('input', {type:'hidden', value:question.info.id_question, name:'bloc['+cBloc+'][ensemble]['+nbEnsemble+'][input]['+nbInput+'][id]'}));
	}
	
	// add all in the el form
	el.appendChild(hidden);
	out.appendChild(el);
	visio.appendChild(divShow);
	
	// reset the selected option to the first
	if(select != undefined) select.options[0].selected = 'selected';
	
	count ++;
}

// remonte une question dans un ensemble (si elle n'est pas tout en haut de l'ensemble)
// question : l'élément HTML contenant toute la question
// nbQuestion : le numéro de la question dans son ensemble
// nbEnsemble : le numéro de l'ensemble où se trouve la question
// nbBloc : le numéro du bloc où se trouve la question
function monterQuestion(question, nbQuestion, nbEnsemble, nbBloc) {
	// on remonte la question si elle n'est pas tout en haut de l'ensemble
	var nbQuestion = question.id.split("_")[3];
	if(nbQuestion > 0) {
		var questionPrecedente = document.getElementById('bloc_'+nbBloc+'ensemble_'+nbEnsemble+'question_'+parseInt(nbQuestion-1));
		question.parentNode.insertBefore(question, questionPrecedente);
		// inversement des id
		questionPrecedente.id = question.id;
		question.id = 'bloc_'+nbBloc+'ensemble_'+nbEnsemble+'question_'+parseInt(nbQuestion-1);
		
		// idem pour les éléments de l'aperçu (à droite)
		var visio = document.getElementById('visioBloc_'+nbBloc+'ensemble_'+nbEnsemble+'question_'+nbQuestion);
		var visioPrecedent = document.getElementById('visioBloc_'+nbBloc+'ensemble_'+nbEnsemble+'question_'+parseInt(nbQuestion-1));
		visio.parentNode.insertBefore(visio, visioPrecedent);
		// inversement des id
		visioPrecedent.id = visio.id;
		visio.id = 'visioBloc_'+nbBloc+'ensemble_'+nbEnsemble+'question_'+parseInt(nbQuestion-1);
	}
}

// descend une question dans un ensemble (si elle n'est pas tout en bas de l'ensemble)
// question : l'élément HTML contenant toute la question
// nbQuestion : le numéro de la question dans son ensemble
// nbEnsemble : le numéro de l'ensemble où se trouve la question
// nbBloc : le numéro du bloc où se trouve la question
function descendreQuestion(question, nbQuestion, nbEnsemble, nbBloc) {
	// on remonte la question si elle n'est pas tout en haut de l'ensemble
	var nbQuestion = question.id.split("_")[3];
	var questionSuivante =  document.getElementById('bloc_'+nbBloc+'ensemble_'+nbEnsemble+'question_'+(parseInt(nbQuestion)+1));
	// test s'il y a une question suivante
	if(questionSuivante) {
		questionSuivante.parentNode.insertBefore(questionSuivante, question);
		// inversement des id
		question.id = questionSuivante.id;
		questionSuivante.id = 'bloc_'+nbBloc+'ensemble_'+nbEnsemble+'question_'+nbQuestion;
		
		// idem pour les éléments de l'aperçu (à droite)
		var visio = document.getElementById('visioBloc_'+nbBloc+'ensemble_'+nbEnsemble+'question_'+nbQuestion);
		var visioSuivant = document.getElementById('visioBloc_'+nbBloc+'ensemble_'+nbEnsemble+'question_'+(parseInt(nbQuestion)+1));
		visioSuivant.parentNode.insertBefore(visioSuivant, visio);
		// inversement des id
		visio.id = visioSuivant.id;
		visioSuivant.id = 'visioBloc_'+nbBloc+'ensemble_'+nbEnsemble+'question_'+nbQuestion;
	}
}
